<template>
  <div class="page-banner-list">
    <div class="page-banner-list__header">
      <el-button
        type="danger"
        :disabled="selectedBannerIds.length === 0"
        @click="handleDeleteSelected(selectedBannerIds)"
      >
        删除选中
      </el-button>

      <el-button type="danger" @click="removeall"> 删除全部 </el-button>

      <el-button type="primary" @click="$router.push('/banner/add')">
        新增轮播图
      </el-button>

      <el-button @click="fetchData">
        <el-icon><Refresh /></el-icon>
      </el-button>
    </div>

    <el-table :data="displayTableData" @selection-change="onSelectionChange">
      <el-table-column type="selection" label="序号" width="80" />
      <el-table-column label="图片" width="180">
        <!-- 
          设置默认插槽内容
          提供有作用域插槽
            作用域插槽中有 row 这个数据，这个数据就是当前行的对象数据
        -->
        <template #default="scope">
          <img :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" width="180" />
      <el-table-column prop="alt" label="描述" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-popconfirm
            title="你确定要删除吗？"
            @confirm="handleDelete(scope.row.bannerid)"
          >
            <template #reference>
              <el-button type="danger"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

      <template #empty>
        <el-empty description="No Data" />
      </template>
    </el-table>

    <div class="page-banner-list__footer">
      <!-- 分页 -->
      <el-pagination
        background
        layout="total, prev, pager, next"
        v-model:current-page="page"
        :page-size="pageSize"
        :total="tableData.length"
      />
    </div>
  </div>
</template>

<script>
// 引入 api 方法
import { getBannerData, delBanner, BannerAll } from "@/api/banner.js";

export default {
  name: "banner-list",
  data() {
    return {
      // 存放轮播图数据
      tableData: [],
      // 当前页
      page: 1,
      // 每页显示条数
      pageSize: 10,

      // 勾选的数据的id集合
      selectedBannerIds: [],
    };
  },

  computed: {
    /**
     * 根据 page 将 tableData 裁切之后用于展示的 表格数据
     */
    displayTableData() {
      // this.tableData.slice(0, 10)
      // 1 this.tableData.slice(0, 10)
      // 2 this.tableData.slice(10, 20)
      // 3 this.tableData.slice(20, 30)
      return this.tableData.slice((this.page - 1) * 10, this.page * 10);
    },
  },

  methods: {
    /**
     * 请求数据
     */
    fetchData() {
      getBannerData().then((data) => {
        //console.log("===", data);
        // 将 data.data 赋值给 tableData
        this.tableData = data.data;
      });
      // axios.get("http://localhost:3000/banners").then((response) => {
      //   const data = response.data;
      //   console.log("data", data);
      //   this.tableData = data;
      // });
    },

    /**
     * 确认删除
     */
    handleDelete(e) {
      //console.log(e);

      delBanner(e).then((data) => {
        // 更新表格数据
        this.fetchData();
      });
    },

    handleDeleteSelected(selectedBannerIds) {
      // 获取到选中的数据
      // 使用 this.selectedBannerIds
      console.log(selectedBannerIds);
      for (let i in selectedBannerIds) {
        delBanner(selectedBannerIds[i]).then((data) => {
          // 更新表格数据
          this.fetchData();
        });
      }

      // delBanner(e).then((data) => {
      //   // 更新表格数据
      //   this.fetchData();
      // });
    },

    //删除全部轮播图
    removeall() {
      BannerAll().then((i) => {
        this.fetchData();
      });
    },
    /**
     * 勾选取消勾选的回调
     * abc Array 每一项就是勾选的数据对象
     */
    onSelectionChange(abc) {
      // [{bannerid: ''}] => ['']
      this.selectedBannerIds = abc.map((item) => item.bannerid);
      //console.log(this.selectedBannerIds);
    },
  },

  mounted() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.page-banner-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  img {
    display: block;
    height: 100px;
  }

  &__header,
  &__footer {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }

  .el-table {
    flex: 1;
  }
}
</style>
